<template>
  <el-select
    :placeholder="`${$language.local('请选择')}${$language.local(labelKey)}`"
    @change="selectChange"
    @visible-change="getConfigeOptions"
    class="el-select"
    clearable
    filterable
    v-loadmore="loadMore"
    v-model="selectId"
  >
    <slot
      :options="options"
      name="options"
    >
      <el-option
        :key="index"
        :label="item[labelKey]"
        :value="item[labelKey]"
        v-for="(item, index) in options"
      ></el-option>
    </slot>
  </el-select>
</template>

<script>
export default {
  props: {
    value: String,
    valueKey: String,
    labelKey: String,
    apiName: String,
    model: Array,
  },
  data() {
    return {
      selectId: this.value,
      options: [],
      total: null,
      loading: false,
      queryInfo: {
        page: 1,
        pageSize: 10,
        keywords: "",
      },
      staticVisible: false,
    };
  },
  mounted() {
    this.getConfigeOptions(true);
  },
  watch: {
    value(newValue) {
      this.selectId = newValue;
    },
    labelKey(newValue) {
      this.labelKey = newValue;
    },
    apiName(newValue) {
      this.apiName = newValue;
      console.log(this.apiName);
      this.getOptions2();
    },
    // model(newValue) {
    //   this.model = newValue;
    //   console.log(this.options);
    // },
  },
  computed: {
    maxPage: function () {
      return Math.ceil(this.total / this.queryInfo.pageSize);
    },
  },
  methods: {
    async getConfigeOptions(visible) {
      if (!visible) {
        return;
      }
      if (this.model) {
        this.options = this.model;
        return;
      }
      if (!this.apiName) {
        return;
      }
      if (!this.staticVisible && this.options.length == 0) {
        this.staticVisible = true;
        this.getOptions2();
      }
    },
    async getOptions(query) {
      if (query) {
        this.queryInfo.keywords = query;
      }
      let response = await this.$http.get(this.apiName, this.queryInfo);
      this.total = response.data.TotalCount;
      this.options = this.options.concat(response.data.Data);
      if (this.options.length === 1) {
        this.selectId = this.options[0][this.labelKey];
        this.$emit("input", this.selectId);
        // this.$emit("change", this.options[0]);
      }
    },
    async getOptions2(query) {
      if (query) {
        this.queryInfo.keywords = query;
      }
      let response = await this.$http.get(this.apiName, this.queryInfo);
      console.log(response);
      this.total = response.data.TotalCount;
      this.options = response.data.Data;
      console.log(this.options);
      if (this.options.length === 1) {
        this.selectId = this.options[0][this.labelKey];
        this.$emit("input", this.selectId);
      }
    },
    async loadMore() {
      if (this.queryInfo.page >= this.maxPage) {
        return;
      }
      this.queryInfo.page++;
      this.loading = true;
      await this.getOptions();
      this.loading = false;
    },
    selectChange(e) {
      let selectItem = this.options.find((v) => {
        return v[this.labelKey] == e;
      });
      this.$emit("input", e);
      this.$emit("change", selectItem);
    },
  },
};
</script>

<style lang="less" scoped>
.el-select {
  width: 100%;
}
</style>
